<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0" />
    <meta charset="utf-8">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <title>我要请假</title>
    <link href="css/style.css" rel="stylesheet" type="text/css">
    <link href="css/lib/datepicker/mobiscroll.css" rel="stylesheet" />
    <link href="css/lib/datepicker/mobiscroll_date.css" rel="stylesheet" />
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/vue/2.5.15/vue.min.js"></script>
    <script src="js/main.js"></script>
    <script src="js/utils/date.js"></script>
  </head>
  <body>
    <div id="qj-container">
      <div class="qj-container">
        <div class="start-time time-box">
          <span>请假开始时间：</span>
          <input type="text" name="start-time" id="start-time" readonly class="qj-input time-color" style="font-size:1rem;background: #fff;"
           placeholder="请输入开始日期"/>
          <i class="calendar_icon start-ico"></i>
        </div>
        <div class="end-time time-box">
          <span>请假结束时间：</span>
          <input type="text" name="end-time" id="end-time" class="qj-input time-color" style="font-size:1rem;background: #fff;" readonly
          placeholder="请输入结束日期">
          <i class="calendar_icon end-ico"></i>
        </div>
        <div class="apply-time time-box">
          <span>请假申请时间：</span>
          <span class="time-color">{{now}}</span>
        </div>
        <div class="qj-reason time-box">
          <span>请假原因：</span>
          <div class="qj-content">
            <textarea placeholder="请输入请假原因" class="time-color reason" name="name" rows="4" cols="40"></textarea>
          </div>
        </div>
      </div>
      <div class="submit-btn-box">
        <a class="submit-btn" @click="save">确定</a>
      </div>
    </div>

    <script src="js/lib/datepicker/jquery.min.js"></script>
    <script src="js/lib/datepicker/mobiscroll_date.js" charset="gb2312"></script>
    <script src="js/lib/datepicker/mobiscroll.js"></script>
    <script type="text/javascript">
    $(function () {
    	var currYear = (new Date()).getFullYear();
    	var opt={};
    	opt.date = {preset : 'date'};
    	opt.datetime = {preset : 'datetime'};
    	opt.time = {preset : 'time'};
    	opt.default = {
    		theme: 'android-ics light', //皮肤样式
    		display: 'modal', //显示方式
    		mode: 'scroller', //日期选择模式
    		dateFormat: 'yyyy-mm-dd HH:mm:ss',
    		lang: 'zh',
    		showNow: true,
    		nowText: "今天",
    		startYear: currYear - 50, //开始年份
    		endYear: currYear + 10 //结束年份
    	};

    	$("#start-time").mobiscroll($.extend(opt['date'], opt['default']));
      $("#end-time").mobiscroll($.extend(opt['date'], opt['default']));

    });
    </script>
    <script type="text/javascript">
      var url="http://118.107.181.199:8088/prevention/app/leave/leaveApply";
      var userId="ec4fbe958fd24bcaa037b9788e442b8b";

      var v = new Vue({
        el:"#qj-container",
        data:{
          now:now(),
          result:{}
        },
        methods:{
          // var startTime=$("#start-time").val();
          // var endTime=$("#end-time").val();

          save:function(event){
            var startTime=  $("input[name='start-time']").val();
            var endTime=  $("input[name='end-time']").val();
            var reason=  $(".reason").val();
            var reqData = {
              "startTime": startTime,
              "endTime": endTime,
              "reason": reason,
              "userId": userId
            }
            $.ajax({
                 url: url,
                 type: "POST",
                 dataType:"json",
                 contentType:'application/json',
                 data: JSON.stringify(reqData),
                 success: function (data) {
                   console.log(data.status);
                  if(data.status == "0"){
                    alert("申请成功");
                    $("input[name='start-time']").val("");
                    $("input[name='end-time']").val("");
                    $(".reason").val("");
                    location.href="./list.html";
                  }else{
                    alert(data.error);
                  }
                 },
                 error:function(e){
                   console.log("error");
                 }
             });
          }
        }
      });
    </script>
  </body>
</html>
